<template>
	<div class="network_monitoring" v-loading="loading">
		<el-row :gutter="16" type="flex">
			<el-col :span="6">
				<chart-card title="CPU">
					<cpu-chart :data="cpuData"></cpu-chart>
				</chart-card>
			</el-col>
			<el-col :span="6">
				<chart-card title="内存"></chart-card>
			</el-col>
			<el-col :span="6">
				<chart-card title="JVM">1</chart-card>
			</el-col>
			<el-col :span="6">
				<chart-card title="服务器信息">
					<ul class="service_info">
						<li>
							<span class="label">服务器名称：</span>
							<span class="value">{{sysData.computerName}}</span>
						</li>
						<li>
							<span class="label">服务器IP：</span>
							<span class="value">{{sysData.computerIp}}</span>
						</li>
						<li>
							<span class="label">操作系统：</span>
							<span class="value">{{sysData.osName}}</span>
						</li>
						<li>
							<span class="label">系统架构：</span>
							<span class="value">{{sysData.osArch}}</span>
						</li>
					</ul>
				</chart-card>
			</el-col>
		</el-row>
		<el-row :gutter="16" type="flex">
			<el-col :span="24"></el-col>
		</el-row>
	</div>
</template>

<script>
import cpuChart from './cpuChart';
import chartCard from './chartCard';
import { getNetMonitorData } from "@/api/openApi";
export default {
	components: { chartCard, cpuChart },
	data() {
		return {
			loading: true,
			serverData: {}
		}
	},
	computed: {
		cpuData() {
			return this.serverData.cpu || {};
		},
		memData() {
			return this.serverData.mem || {};
		},
		jvmData() {
			return this.serverData.jvm || {};
		},
		sysData() {
			return this.serverData.sys || {};
		},
		sysFiles() {
			return this.serverData.sysFiles || [];
		}
	},
	mounted() {
		this.loading = true;
		this.getServer()
	},
	methods: {
		async getServer() {
			let result = await getNetMonitorData().then((res) => res.data);
			this.loading = false;
			if(result.code === '0') {
				this.serverData = !!result.data && result.data.length > 0 ? result.data[0] : {};
			}
		},
		setCpuFree(val) {
			var free = Number(val);
			free = free > 90 ? "90." : free
			return free;
		}
	},
}
</script>

<style lang="scss" scoped>
.network_monitoring {
	height: 100%;
	flex-wrap: wrap;
	overflow: hidden;
	background-color: #f5f7fa;
}

.service_info {
	padding: 16px;
	li {
		line-height: 1;
		margin-top: 16px;

		&:first-child {
			margin-top: 0;
		}

		span.label {
			color: #666;
		}
	}
}
</style>